const theme = {
  color: {
    primary: '#144fff',
    secendary: '#5cb3cc'
  },
  text: {},
  mixin: {
    backImg: `linear-gradient(25deg, #144fff, #286ffb, #268df6, #00aaf1)`,
    content: 'width:1240px;margin:50px auto;',
    dropStyle: ` background-color: #fff;
    color: #ccc;
    border-bottom:1px solid #ccc ;
box-shadow: 0 0 10px rgb(0 0 0 / 60%);
    .tabs{
            color: #333;
            &:hover{
                    text-shadow: 0 0 3px rgb(0 0 0 / 20%);
                    color: #2047be;
            }
    }`,
    btnV1: `.button-82-pushable {
      position: absolute;
      border: none;
      background: transparent;
      padding: 0;
      cursor: pointer;
      outline-offset: 4px;
      transition: filter 250ms;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      left: 50%;
      transform: translateX(-50%);
      margin: 60px auto;
      
    }

    .button-82-shadow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      background: hsl(0deg 0% 0% / 0.25);
      will-change: transform;
      transform: translateY(2px);
      transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
    }

    .button-82-edge {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      background: linear-gradient(
        to left,
        hsl(340deg 100% 16%) 0%,
        hsl(340deg 100% 32%) 8%,
        hsl(340deg 100% 32%) 92%,
        hsl(340deg 100% 16%) 100%
      );
    }

    .button-82-front {
      display: block;
      position: relative;
      padding: 12px 27px;
      border-radius: 12px;
      font-size: 1.1rem;
      color: white;
      background: hsl(345deg 100% 47%);
      will-change: transform;
      transform: translateY(-4px);
      transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
    }

    @media (min-width: 768px) {
      .button-82-front {
        font-size: 1.25rem;
        padding: 12px 42px;
      }
    }

    .button-82-pushable:hover {
      filter: brightness(110%);
      -webkit-filter: brightness(110%);
    }

    .button-82-pushable:hover .button-82-front {
      transform: translateY(-6px);
      transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
    }

    .button-82-pushable:active .button-82-front {
      transform: translateY(-2px);
      transition: transform 34ms;
    }

    .button-82-pushable:hover .button-82-shadow {
      transform: translateY(4px);
      transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
    }

    .button-82-pushable:active .button-82-shadow {
      transform: translateY(1px);
      transition: transform 34ms;
    }

    .button-82-pushable:focus:not(:focus-visible) {
      outline: none;
    }`
  }
}
export default theme
